<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <div class="bg">
    <div class="tip">往下滚动查看效果</div>

    <!-- 1.2 要进行动画的主容器 -->
    <div class="box">
      <div id="btn">
        <div class="text">今晚猎个痛快</div>

        <!-- 1.3 进行动画时搭配显示的 “+” 按钮 -->
        <svg id="icon" width="40" height="40">
          <circle cx="20" cy="20" r="20" fill="#0071e3" />
          <g fill="white">
            <rect width="21" height="2" rx="2" ry="2" x="9" y="18"></rect>
            <rect width="2" height="21" rx="2" ry="2" x="19" y="9"></rect>
          </g>
        </svg>
      </div>
    </div>
  </div>
  <!-- 1.4 默认下滑, 想要看到 “输入框+按钮” 动画时, 先在当前视图顶栏弹出的 “半圆蓝色图标” -->
  <div id="blue-circle"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script src="./index.js"></script>
</body>

</html>